<template>
    <view class="swiper">
        <swiper class="swiper-box" :autoplay="true" :current="currentIndex" interval="3000" :circular="true" previous-margin="0"
                next-margin="0" :indicator-dots="true" indicator-color="gray" indicator-active-color="#ffffff"  @change="changeCurrent">
            <swiper-item class="s-b-item" v-for="(item,index) in list" :key="index" :class="currentIndex===index ? 'current-item' : 'no-item'">
                <image :src="item" ></image>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
    export default{
        name:'m-goodsSwiper',
        props:{
            list:{
                type:Array,
                default(){
                    return []
                }
            }
        },
        data(){
            return{
                currentIndex:0
            }
        },
        mounted(){

        },
        methods:{
            changeCurrent(e){
                this.currentIndex=e.detail.current
            }
        }
    }
</script>

<style scoped lang="less" >
    .swiper{
        width: 100%;
        .swiper-box{
            width: 100%;
            height: 620rpx;
            .s-b-item{
                width: 100%;
                /*padding: 0  20rpx;*/
                box-sizing: border-box;
                transition: padding 0.5s;

                image{
                    width: 100%;
                    height: 100%;
                    display: block;
                    /*border-radius: 30rpx;*/
                }
            }
            .current-item{
                height: 300rpx;
            }
            .no-item{
                padding: 20rpx 0;
            }
        }
    }
</style>
